<template>
<!--  <div>{{checked + ''}}</div>-->
  <van-switch
    checked="{{ checked }}"
    active-value="{{activeValue}}"
    inactive-value="{{inactiveValue}}"
    @change="onChange"></van-switch>
</template>

<script>
  const formEmitterBehavior = require('../../static/emitter.behavior')
  const formELementBehavior = require('../../static/form-element.behavior')

  export default {
    behaviors: [
      formEmitterBehavior,
      formELementBehavior
    ],
    relations: {
      '../mt-form-item/index': {
        type: 'ancestor', // 关联的目标节点应为祖先节点
        linked(v) {
          this.formItem = v
          // console.log('this.formItem', this.formItem)
        },
        unlinked() {
          this.formItem = null
        }
      }
    },
    data() {
      return {
        formItem: null,
        checked: false
      }
    },
    properties: {
      sModel: null,
      activeValue: null,
      inactiveValue: null
    },
    observers: {
      'sModel': function (field) {
        // console.log('field', field, this.data.sModel)
        this.setNativeValue(this.data.sModel)
      }
    },
    methods: {
      onChange(e) {
        this.setNativeValue(e.detail)
      },
      setNativeValue(val) {
        this.setData({
          checked: val
        })
        this.callComponent(this.formItem, 'mtFormChange', [val])
      }
    },
  }
</script>

<style lang="scss">
</style>
